<template>
  <div class="knowledge-base">
    <div class="breadcrumb">
      <Breadcrumb :data="breadcrumbData"></Breadcrumb>
    </div>
    <main>
      <div class="search-container">
        <div class="search-item">
          <el-input placeholder="名称" v-model="name"></el-input>
          <el-button type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
        </div>
        <div class="search-item">
          <el-button type="primary" @click="handleUpload">上传</el-button>
        </div>
      </div>
      <div class="table-container">
        <el-table
          class="table-content"
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="tableData">
          <el-table-column label="方案名称" prop="name"></el-table-column>
          <el-table-column label="成果发布时间">
            <template slot-scope="scope">
              <div class="detail-info">
                <p>{{ scope.row.firstEnterTime }}</p>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <i class="el-icon-download" @click="handleDownload(scope.row)"></i>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
        <el-pagination
          v-if="total > 10"
          :page-size="pageSize"
          :current-page="pageNo"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 30, 50]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </main>
  </div>
</template>

<script>
import Breadcrumb from '@/components/public/Breadcrumb';

export default {
  data() {
    return {
      // 面包屑数据
      breadcrumbData: [
        {
          name: '技术管理',
        },
        {
          name: '方案管理'
        }
      ],
      name: '',
      tableLoading: false,
      tableData: [],
      total: 0,
      pageSize: 10,
      pageNo: 1
    };
  },
  components: {
    Breadcrumb
  },
  methods: {
    /**
       * 获取列表数据
       */
    async getTableData() {
      const { success, data } = await this.$Model.test();
      if (success && Array.isArray(data.data)) {}
    },
    /**
       * 搜索
       */
    handleSearch() {
      this.getTableData();
    },
    /**
       * pageSize 改变时会触发
       * @param pageSize 每页条数
       */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
       * currentPage 改变时会触发
       * @param pageNo 当前页
       */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    /**
       * 上传
       */
    handleUpload() {},
    /**
       * 列表下载
       */
    handleDownload() {}
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/table';

  .knowledge-base {
    width: 100%;
    height: 100%;
    background: $mainBg;
    color: #fff;
    position: relative;
    .breadcrumb {
      width: 100%;
      height: 30px;
      /deep/ .breadcrumb-comp {
        height: 30px;
        border: none;
      }
    }
    main {
      width: 100%;
      height: calc(100% - 40px);
      padding: 0 20px;
      .search-container {
        width: 100%;
        height: 50px;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        .search-item {
          height: 100%;
          float: left;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-right: 20px;
          .el-button {
            margin-left: 10px;
          }
        }
      }
      .table-container {
        width: 100%;
        height: calc(100% - 80px);
        background-color: $mainBg;
        border-radius: 10px;
        position: relative;
        .table-content {
          height: calc(100% - 50px);
          /deep/ .el-table__body-wrapper {
            height: 100%;
            padding-bottom: 46px;
            overflow-y: auto;
            .btn {
              padding: 0 5px;
              cursor: pointer;
              color: $mainColor;
            }
          }
        }
      }
    }
  }

</style>
